<template>
	<view class="pageBox">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm" labelWidth="160rpx">
			<u-form-item label="账户名" prop="username" borderBottom>
				<u--input v-model="userInfo.username" border="none" placeholder="请填写账户名"></u--input>
			</u-form-item>
			<u-form-item label="手机号码" prop="phone" borderBottom>
				<u--input v-model="userInfo.phone" placeholder="请输入手机号码" border="none"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="password" borderBottom>
				<u--input v-model="userInfo.password" type="password" placeholder="请输入密码" border="none"></u--input>
			</u-form-item>
			<u-form-item label="确认密码" prop="password1" borderBottom>
				<u--input v-model="userInfo.password1" type="password" placeholder="请输入确认密码" border="none"></u--input>
			</u-form-item>
			<view style="margin-top: 80rpx;"></view>
			<u-button @click="submit" shape="circle" type="primary">提交</u-button>
		</u--form>
		<!-- <myPicker :show="pickerShow" :columns="[actions]" :title="pickerTitle"
			@confirm="confirm($event,'value','label')" @close="closePicker('pickerShow')"
			@cancel="closePicker('pickerShow')"></myPicker>
		<u-datetime-picker :minDate="-4607395543000" ref="datetimePicker" :show="datetimeShow" v-model="datetimeValue"
			mode="date" @confirm="datetimeConfirm" @close="closePicker('datetimeShow')"
			@cancel="closePicker('datetimeShow')"></u-datetime-picker> -->
	</view>
</template>

<script>
	import {
		certification
	} from "@/api/certification.js"
	import * as util from "@/utils/util.js";
	import {
		dictDataList
	} from "@/api/system.js"
	import * as uploadApi from "@/api/upload.js"
	import {
		moveRegister
	} from "@/api/login.js"
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.userInfo.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				userInfo: {
					"username": "",
					"password": "",
					"phone": "",
					"password1": "",
				},
				IMGMaxSize: 1024 * 1024 * 5,
				fileList: [],
				fileList_imgs: [],
				fileList_old: [],
				actions: ['男', '女', ],
				rules: {
					'username': {
						type: 'string',
						required: true,
						message: '请填写账户名',
						trigger: ['blur', 'change']
					},
					'phone': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: '长度在 6 到 20 个字符',
							trigger: 'blur'
						},
						{
							validator: validatePass,
							trigger: 'blur'
						}
					],
					password1: [{
							required: true,
							message: '请确认密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: '长度在 6 到 20 个字符',
							trigger: 'blur'
						},
						{
							validator: validatePass2,
							trigger: 'blur',
							required: true
						}
					],
					'birthLabel': {
						type: 'string',
						required: true,
						message: '请选择出生日期',
						trigger: ['blur', 'change']
					},

				},
				radio: '',
				switchVal: false,
				datetimeShow: false,
				datetimeValue: Number(new Date()),
				dicts: {
					sys_user_sex: {},
					elite_type: {}
				},
				dictList: {
					sys_user_sex: [],
					elite_type: []
				},
				openName: '',
				pickerTitle: '',
				pickerShow: false,
			};
		},
		mounted() {},
		methods: {
			submit() {
				const that = this
				this.$refs.uForm.validate().then(res => {
					const fromData = JSON.parse(JSON.stringify(this.userInfo))
					uni.$u.throttle(
						moveRegister(fromData).then(res => {
							that.$toast1("注册成功", () => {
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}, 500)
							})
						}), 1000)
				}).catch(errors => {
					this.userInfo.certificationMaterial = ''
					// uni.$u.toast('校验失败')
				})
			},
			sexSelect(e) {
				this.userInfo.sex = e.name
				this.$refs.uForm.validateField('sex')
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>
<style lang="scss" scoped>
	.pageBox {
		padding: 0 30rpx;

		/deep/ .u-form-item {
			position: relative;

		}

		.inputClick {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		.button {
			background: linear-gradient(90deg, #5F96E8 0%, #1977E1 100%);
		}
	}
</style>